<template>
  <div class="home_page">
    <div class="home_top">
      <div class="home_tool">工作台</div>
      <div class="home_msg_warp">
        <div class="msg_warp_remind">
          <el-avatar :src="circleUrl" :size="70"/>
          <div>
            <p>下午好！管理员，开始您一天的工作吧！</p>
            <span>今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</span>
          </div>
        </div>
      </div>
    </div>

    <div class="home_content">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <ErhaCard class="home_item">
            <template #title>
              <span>项目</span>
            </template>
            <template #body>
              <div style="height: 300px"></div>
            </template>
          </ErhaCard>

          <ErhaCard class="home_item">
            <template #title>
              <span>项目</span>
            </template>
            <template #tools>
              <el-link type="primary" :underline="false">primary</el-link>
            </template>
            <template #body>
              <div style="height: 300px"></div>
            </template>
          </ErhaCard>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <ErhaCard class="home_item">
            <template #title>
              <span>项目</span>
            </template>
            <template #body>
              <div style="height: 300px"></div>
            </template>
          </ErhaCard>

          <div class="home_item">
            <div style="height: auto; background-color: #FFFFFF">
              <img src="http://localhost:5173/src/assets/svgs/home-design.svg"
                   style="width: 100%"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script setup>
import ErhaCard from '@/components/ErhaCard/index.vue'

defineOptions({name: 'Home'})

const circleUrl = ref('https://img0.baidu.com/it/u=2746352008,2041591833&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360')


</script>

<style scoped lang="scss">
.home_page {
  width: 100%;
  height: 100%;
  padding-top: 10px;

  .home_top {
    background-color: #FFFFFF;

    .home_tool {
      border-bottom: 1px solid #EBEEF5;
      padding: 10px;
    }

    .home_msg_warp {
      padding: 20px 40px;
      color: #303133;

      .msg_warp_remind {
        display: flex;
        align-items: center;
        gap: 20px;

        p {
          //color: #303133;
          font-size: 18px;
          //font-weight: bold;
        }

        span {
          color: #909399;
        }
      }
    }
  }

  .home_content {
    padding: 10px;

    .home_item {
      margin-bottom: 10px;
    }
  }

}
</style>
